<template>
    <!--轮播图区域-->
    <mt-swipe :auto="4000">
        <!--在组件中，使用 v-for 循环的话，一定要使用 key-->
        <mt-swipe-item v-bind:key="img.url" v-for=" img in listImg">
            <img :class="{carouse:true,selfh:isFull}" :src="img.url" alt="">
        </mt-swipe-item>
    </mt-swipe>
</template>

<script>
    export default {
        name: "swipe",
        props: ['listImg','isFull'],
    }
</script>

<style lang="scss" scoped>
    /*轮播图默认没有高度，要手动设置*/
    .mint-swipe {
        height: 200px;
        .carouse {
            /*width: 100%;*/
            height: 100%;
        }
        .selfh {
            width: 100%;
        }
    }

    .mint-swipe-item {
        text-align: center;
/*        &:nth-child(1) {
            background-color: red;
        }
        &:nth-child(2) {
            background-color: blue;
        }
        &:nth-child(3) {
            background-color: orange;
        }*/
    }

    /*或者*/

    /*     .mint-swipe-item:nth-child(1) {
              background-color: red;
         }
         .mint-swipe-item:nth-child(2) {
              background-color: blue;
         }
         .mint-swipe-item:nth-child(3) {
              background-color: orange;
         }*/
</style>